<template>
	<div class="iconSelector">
		<el-popover placement="bottom" trigger="hover">
			<div class="iContent">
				<div class="iconBlock" :class="{active:value==item}" v-for="item in icons" :key="item" @click="$emit('input',item)">
					<span :class="item"></span>
				</div>
			</div>
			<span class="currentIcon" slot="reference" :class="value" />
		</el-popover>

	</div>
</template>

<script>
import icons from "./icons";
export default {
	name: "FormIconSelector",
	props: {
		value: {
			default: "el-icon-setting"
		}
	},
	data() {
		return {
			icons: icons
		};
	}
};
</script>

<style scoped lang='scss'>
@import "@/styles/variables.scss";
.iContent {
	width: 410px;
	height: 300px;
	display: flex;
	flex-wrap: wrap;
	overflow-y: auto;
	.iconBlock {
		flex-shrink: 0;
		width: 40px;
		height: 40px;
		font-size: $--font-size-extra-large;
		display: flex;
		align-items: center;
		justify-content: center;
		border: $--border-base;
		margin: -1px 0 0 -1px;
		cursor: pointer;
		background-color: white;
		transform: all 0.25s;
		&:hover,
		&.active {
			color: $--color-primary;
			box-shadow: $--box-shadow-base;
			z-index: 1000;
			transform: scaleX(1.1) scaleY(1.1);
		}
		&:nth-child(10n + 1) {
			margin: -1px 0 0 0px;
		}
		&:nth-child(10n + 1) {
			margin: -1px 0 0 0px;
		}
		&:nth-child(-n + 10) {
			margin-top: 0;
		}
	}
}
.iconSelector {
	.currentIcon {
		font-size: 25px;
		color: $--color-primary;
		cursor: pointer;
	}
}
</style>
